<template>
  <div class="dropLogin">
    <el-dropdown>
      <span class="el-dropdown-link">
        {{getLogin?'已登录':'未登录'}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><router-link style="color:#666;text-decoration:none;" to="/dashboard">主页</router-link></el-dropdown-item>
        <el-dropdown-item><a style="color:#666;text-decoration:none;" href="https://gitee.com/xulujin/snack_shop_cms.git" target="_blank">项目地址(gitee)</a></el-dropdown-item>
        <el-dropdown-item><a style="color:#666;text-decoration:none;" href="https://github.com/1314xulujin">github</a></el-dropdown-item>
        <el-dropdown-item>
          <a style="color:#666;text-decoration:none;" href="http://1314xulujin.github.io">博客</a>
        </el-dropdown-item>
        <template>
          <el-button type="text" style="display:block;width:100%;text-align:left;">
            <el-dropdown-item divided @click.native="logout()">登出</el-dropdown-item>
          </el-button>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters("user", [
      // 获取登录状态的值
      "getLogin"
    ])
  },
  methods: {
    ...mapActions('user',[
      'removeUserInfo',
    ]),
    ...mapActions('system',[
      'clearRoutes'
    ]),
    logout() {
      const that = this
      this.$http.logout().then(res => {
          that.removeUserInfo()
          console.log(this)
          that.$router.push({
            path: '/login'
          })
          console.log(res)
          this.clearRoutes()
          this.$message({
            type: "success",
            message: "退出成功!"
          });
      });
    }
  }
};
</script>

<style>
</style>
